import styled from 'styled-components'
import Icon from '../../component/Icon'
import { useTranslation } from 'react-i18next'

const Box = styled.div`
    padding-top: .25rem;
    box-sizing: border-box;
`

const IconBox = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: .25rem;
`

const Span = styled.span`
    margin-top: 1.25rem;
    font-size: .875rem;
    font-weight: bold;
    color: #fff;
`

interface Props {
    className?: string;
    onClick?: () => void;
}

const Action: React.FC<Props> = ({ className, onClick }) => {
    const { t } = useTranslation();
    return <Box
        className={className}
        onClick={onClick}
    >
        <IconBox>
            <Icon
                name='home_click'
                width="3.75rem"
            />
            <Span>{t('home.start')}</Span>
        </IconBox>
    </Box>
}
export default Action